<!--
 * @Author: xiaotiwen
 * @Date: 2020-05-20 17:02:14
 * @LastEditTime: 2020-05-22 15:20:54
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\scheduleSetting\schedulePanel.vue
 * @Description: 排课
-->
<template>
    <div class="schedulePanel">
        <h2 class="schedulePanel_titles">{{$t('scheduleSetting.title.schedule')}}</h2>
        <div class="schedulePanel_body">
            <el-form :model="form" ref="form">
                <el-row>
                    <el-col :span="10" class="schedulePanel_col">
                        <el-select v-model="form.number1">
                            <el-option v-for="(item, idx) in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <span>~</span>
                        <el-select v-model="form.number2">
                            <el-option v-for="(item, idx) in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-radio-group v-model="form.radio">
                                <el-radio :label="1">{{$t('scheduleSetting.label.weekNum1')}}</el-radio>
                                <el-radio :label="2">{{$t('scheduleSetting.label.weekNum2')}}</el-radio>
                                <el-radio :label="3">{{$t('scheduleSetting.label.weekNum3')}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" class="schedulePanel_body_btns">
                        <el-button class="schedulePanel_btns" type="primary">{{$t('message.confirm')}}</el-button>
                        <el-button class="schedulePanel_btns">{{$t('message.reset')}}</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="schedulePanel_body_btns">
                <el-button type="primary" class="schedulePanel_btns">{{$t('scheduleSetting.btn.backup')}}</el-button>
                <el-button type="danger" class="schedulePanel_btns" @click="deletes">{{$t('message.delete')}}</el-button>
            </div>
            <edu-table ref="tables" :data="data" :order="false">
                <el-table-column :min-width="item.width" v-for="(item, idx) in label" :key="item.props" :label="item.label" :prop="item.props" :sortable="item.sortable" />
                <el-table-column align="center" width="80px" :label="$t('message.operating')" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="borrow">{{$t('fundingManagement.label.isClassBorrow')}}</el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </div>
        <el-dialog :title="$t('scheduleSetting.title.classInfo')" :visible="borrowFlag" @close="borrowFlag = false" width="926px" @confirm="confirm" :close-on-click-modal="false">
            <classroomInfo ref="classroom"></classroomInfo>
            <span slot="footer" class="dialog-footer">
                <el-button @click="borrowFlag = false">{{ $t('message.cancel') }}</el-button>
                <el-button @click="confirm" type="primary" >
                    {{ $t('message.confirm') }}
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import classroomInfo from './classroomInfo';
export default {
    // 组件名称
    name: 'schedulePanel',
    // 局部注册的组件
    components: {
        classroomInfo
    },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            borrowFlag: false,
            form: {
                number1: '',
                number2: '',
                radio: ''
            },
            data: [
                { names: '星期一1-8星期二1-8星期三1-8星期四1-8星期五1-8星期六1-8', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 10000 }], number: 9999, status: 1, btnFlag: true },
                { names: '星期一1-8星期二1-8星期三1-8星期四1-8星期五1-8星期六1-8', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 99999 }], number: 8888, status: 2, btnFlag: false },
                { names: '星期一1-8星期二1-8星期三1-8星期四1-8星期五1-8星期六1-8', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 99999 }], number: 8888, status: 3, btnFlag: false },
                { names: '星期一1-8星期二1-8星期三1-8星期四1-8星期五1-8星期六1-8', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 99999 }], number: 9999, status: 4, btnFlag: false },
                { names: '星期一1-8星期二1-8星期三1-8星期四1-8星期五1-8星期六1-8', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 99999 }], number: 8888, status: 5, btnFlag: false }
            ],
            label: [
                { label: '占用周', props: 'close', width: 100, sortable: true },
                { label: '教室', props: 'close', width: 100, sortable: true },
                { label: '节次', props: 'names', width: 500, sortable: true }
            ],
            options: [
                { label: 1, value: 1 },
                { label: 2, value: 2 },
                { label: 3, value: 3 },
                { label: 4, value: 4 },
                { label: 5, value: 5 },
                { label: 6, value: 6 },
                { label: 7, value: 7 },
                { label: 8, value: 8 },
                { label: 9, value: 9 },
                { label: 10, value: 10 },
                { label: 11, value: 11 },
                { label: 12, value: 12 },
                { label: 13, value: 13 },
                { label: 14, value: 14 },
                { label: 15, value: 15 },
                { label: 16, value: 16 },
                { label: 17, value: 17 },
                { label: 18, value: 18 },
                { label: 19, value: 19 },
                { label: 20, value: 20 }
            ]
        };
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    created() {
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    mounted() {
    },
    // 组件方法
    methods: {
        borrow() {
            this.borrowFlag = true;
        },
        deletes() {
            this.$confirm(this.$t('message.areYouSureDelete'), this.$t('message.prompt'), {
                confirmButtonText: this.$t('message.confirm'),
                cancelButtonText: this.$t('message.cancel'),
                type: "warning"
                // eslint-disable-next-line no-unused-vars
            }).then((res) => {
                this.$message({
                    type: 'success',
                    message: this.$t('message.deleteSuccess')
                });
                // eslint-disable-next-line no-unused-vars
            }).catch((err) => {
                this.$message({
                    type: 'warning',
                    message: this.$t('scheduleSetting.tips.cancelSuccess')
                });
            });
        },
        confirm() {
            let test = this.$refs.classroom.getForms();
            console.log('test :>> ', test);
        }
    }
};
</script>
<style lang="scss" scoped>
.schedulePanel {
    background-color: #fff;
    padding: 20px 0;
    &_titles {
        padding: 0 40px 20px;
        border-bottom: solid #ccc 1px;
        font-size: 18px;
        font-weight: bold;
    }
    &_col {
        display: flex;
        align-items: center;
    }
    &_btns {
        width: 80px;
    }
    &_body {
        padding: 0 20px;
        &_btns {
            display: flex;
            flex-direction: row-reverse;
            ::v-deep .el-button--primary {
                margin-left: 10px;
            }
        }
        &_btns:nth-child(2) {
            padding-bottom: 10px;
        }
    }
}
</style>
